<script setup lang="ts">
import { ElRow, ElCol, ElSkeleton, ElCard, ElDivider } from 'element-plus'
import { useI18n } from '@/hooks/web/use-i18n'
import { ref, reactive } from 'vue'

const loading = ref(true)

// 获取统计数
let totalSate = reactive({
  project: 20,
  access: 30,
  todo: 100
})

const getAllApi = async () => {
  setTimeout(() => {
    loading.value = false
  }, 300)
}

getAllApi()

const { t } = useI18n()
</script>

<template>
  <div>
    <el-card shadow="never">
      <el-skeleton :loading="loading" animated>
        <el-row :gutter="20" justify="space-between">
          <el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
            <div class="flex items-center">
              <img
                src="@/assets/imgs/logo.png"
                alt=""
                class="w-70px h-70px rounded-[50%] mr-20px"
              />
              <div>
                <div class="text-20px text-700">
                  {{ t('workplace.goodMorning') }}，{{ t('workplace.happyDay') }}
                </div>
              </div>
            </div>
          </el-col>
          <el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
            <div class="flex h-70px items-center justify-end <sm:mt-20px">
              <div class="px-8px text-right">
                <div class="text-14px text-gray-400 mb-20px">{{ t('workplace.project') }}</div>
                {{ totalSate.project }}
              </div>
              <el-divider direction="vertical" />
              <div class="px-8px text-right">
                <div class="text-14px text-gray-400 mb-20px">{{ t('workplace.toDo') }}</div>
                {{ totalSate.todo }}
              </div>
              <el-divider direction="vertical" border-style="dashed" />
              <div class="px-8px text-right">
                <div class="text-14px text-gray-400 mb-20px">{{ t('workplace.access') }}</div>
                {{ totalSate.access }}
              </div>
            </div>
          </el-col>
        </el-row>
      </el-skeleton>
    </el-card>
  </div>
</template>
